<!--单行文本-->
<template>
  <el-autocomplete
    v-model="value"
    v-bind="$attrs"
    :id="'c' + formItemMeta.columnId"
    :name="'c' + formItemMeta.columnId"
    :title="title"
    :clearable="clearable"
    :fetch-suggestions="querySearch"
  >
    <template #default="{ item }">
      <div class="name">
        {{ item.value }}
        <span class="addr" style="float:right">{{ item.label }}</span>
      </div>
    </template>
  </el-autocomplete>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  // import { ElAutocomplete } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController, loadController } from '../map'

  export default defineComponent({
    name: 'nf-el-form-item-autocomplete',
    inheritAttrs: false,
    components: {
      // ElAutocomplete
    },
    props: {
      ...itemProps, // 基础属性
      colName: String, // 变更字段名称
      modelValue: [String, Array, Number]
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('props-text', props)
      // console.log('props-ctx', context)
      const {
        value
      } = itemController(props, context.emit) // value、mySubmit

      // com的查询事件
      const querySearch = (str, cb) => {
        // const results = str
        //  ? props.optionList.filter((item) =>
        //      item.value.indexOf(str.toString().toLowerCase()) === 0)
        //  : props.optionList

        // 调用 callback 返回建议列表的数据
        cb(props.optionList)
        // cb(results)
      }

      // 从后端获取数据
      const { loadDict } = loadController(props)
      loadDict()

      return {
        value,
        querySearch
      }
    }
  })
</script>
